<template>
  <div id="app">
    <div style="width: 15%">
      <a-menu
        :selected-keys="[key]"
        :default-open-keys="['sub1']"
        mode="inline"
        theme="dark"
        :inline-collapsed="collapsed"
        style="height: 80.5rem"
        @click="changeMenu"
      >
        <a-icon
          type="cloud"
          style="font-size: 4rem; margin-left: 2rem; margin-bottom: 0.8rem"
          theme="twoTone"
        />
        <a-menu-item
          v-for="v in menu"
          :key="v.key"
          :title="v.title"
          :value="v.value"
        >
          <a-icon :type="v.type" />
          <span>{{ v.title }}</span>
        </a-menu-item>
      </a-menu>
    </div>
    <h1
      style="
        top: 1rem;
        left: 6.5rem;
        color: white;
        z-index: 999999;
        position: absolute;
      "
    >
      集成云
    </h1>
    <a-page-header
      style="
        border: 1px solid rgb(235, 237, 240);
        left: 15%;
        position: absolute;
        z-index: 9999999;
        top: 0rem;
        width: 85%;
      "
      :title="title"
      :sub-title="subtitle"
    >
      <template slot="extra">
        <div style="display: inline-block; padding-right: 1rem">
          <a-select
            default-value="ali"
            style="width: 120px"
            @change="handleChange"
          >
            <a-select-option v-for="(v, k) in cloud" :key="k" :value="v.key">
              {{ v.value }}
            </a-select-option>
          </a-select>
        </div>
        <div style="display: inline-block; padding-right: 8rem">
          <a-select
            default-value="bj"
            style="width: 120px"
            @change="handleChange"
          >
            <a-select-option v-for="(v, k) in region" :key="k" :value="v.key">
              {{ v.value }}
            </a-select-option>
          </a-select>
        </div>
        <a-badge dot>
          <a-icon type="notification" />
        </a-badge>
      </template>
    </a-page-header>
    <div
      style="
        left: 15%;
        width: 85%;
        height: 130%;
        top: 7%;
        position: absolute;
        background-color: whitesmoke;
      "
    >
      <router-view />
    </div>
    <a-avatar
      style="backgroundcolor: #87d068; position: absolute; left: 94%; top: 1rem"
      icon="user"
    />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      collapsed: false,
      title: '总览',
      subtitle: '当前云服务资源概览',
      menu: [
        {
          key: 1,
          title: '总览',
          subtitle: '当前云服务资源概览',
          type: 'fund',
          value: 'total',
        },
        {
          key: 2,
          title: '成本优化',
          subtitle: '帮助您高效快速节省更多资金',
          type: 'pie-chart',
          value: 'chengben',
        },
        {
          key: 3,
          title: '资源组',
          subtitle: '当前可用的云服务器资源',
          type: 'desktop',
          value: 'ziyuan',
        },
        {
          key: 4,
          title: '负载均衡',
          subtitle: '帮助您维护高可用服务器资源',
          type: 'inbox',
          value: 'fuzai',
        },
      ],
      cloud: [
        {
          value: '阿里云',
          key: 'ali',
        },
        {
          value: '腾讯云',
          key: 'tx',
        },
        {
          value: '华为云',
          key: 'hw',
        },
      ],
      region: [
        {
          value: '北京',
          key: 'bj',
        },
        {
          value: '华东',
          key: 'hd',
        },
        {
          value: '杭州',
          key: 'hz',
        },
        {
          value: '上海',
          key: 'sh',
        },
      ],
      key: 1,
    }
  },
  mounted() {
    this.key = 1
    if (this.$router.currentRoute.name !== 'index') {
      this.$router.push({ name: this.$global.config.total })
    }
  },
  methods: {
    changeMenu(e) {
      this.key = e.key
      this.title = this.menu[e.key - 1]['title']
      this.subtitle = this.menu[e.key - 1]['subtitle']
      if (
        this.$router.currentRoute.path.indexOf(
          this.$global.config[e.item.value] === -1
        )
      ) {
        this.$router.push({ name: this.$global.config[e.item.value] }).catch({})
      }
    },
    onSearch(value) {
      console.log(value)
    },
    handleChange(value) {
      console.log(`selected ${value}`)
    },
  },
}
</script>

<style></style>
